<template>
  <div>
    <div id="main" style="width: 100%; height: 300px"></div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    dimensionList:Array
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.getEchartData();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getEchartData() {
      console.log(this.dimensionList,'w22')
      const maxNum=Math.max(...this.dimensionList)
      console.log(maxNum,'maxNummaxNum')
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
         title: {
        text: '',
        subtext: '',
        x: '20',
        y: '20',
        textStyle: {
            color: '#ffffff',
            fontFamily: 'Microsoft YaHei',
            fontSize: '16'
        }
    },
    color: ['#EF7761', '#D372B2'],
    tooltip: {
        trigger: 'item'
    },
    grid: {
        top: '23%'
    },
    backgroundColor: '',

    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#2C2C2C',
                backgroundColor: '',
                borderRadius: 3,
                padding: [-5, -5],
                 fontSize:14
            }
        },
        radius: '70%',
        center: ['50%', '50%'],
        indicator: [{
                name: '企业性质',
                max: maxNum
            },
            {
                name: '经营风险',
                max: maxNum
            },
            {
                name: '财务风险',
                max: maxNum
            },
            {
                name: '信用历史',
                max: maxNum
            },
            {
                name: '关联风险',
                max:maxNum
            },
            {
                name: '经营环境',
                max: maxNum
            }
        ]
    },
    series: [{
       symbol: 'none',
        name: '大连' + 'vs' + '青岛',
        type: 'radar',
        data: [{
                value: this.dimensionList,
                name: '信息详情',
                areaStyle: {
                    normal: {
                        color: '#FAE0E0'
                    }
                }
            },
          
        ]
    }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
